<template>
  <div class="game-box">
    <div class="game-ball-container">
      <img ref="gameBall" src="static/img/game/game_ball.png" class="game-ball">
    </div>

    <div class="container">
      <van-row>
        <van-col span="8" class="container-top">
          <img src="static/img/game/mine.png">
          <span>级别：{{ obtInfo.user_rating }}</span>
        </van-col>
        <van-col span="8" class="container-top">
          <img src="static/img/game/diamonds.png">
          <span>AUTOKEN: {{ obtInfo.user_qty }}</span>
        </van-col>
        <van-col span="8" class="container-top">
          <span>矿池：{{ obtInfo.pool_qty }}</span>
        </van-col>
      </van-row>

      <van-notice-bar
        :text="'公告：' + noticeShortInfo"
        left-icon="static/img/game/notice.png"
        class="notice-bar"
        @click="clickToNotice"
      />

      <div class="container-right" @click="clickMining">
        <img src="static/img/game/diamonds_top.png">
        <span>AUTOKEN挖矿</span>
      </div>
    </div>

  </div>
</template>

<script>
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
  data () {
    return {
      btnDisabled: false,
      obtInfo: {},
      noticeShortInfo: '',
      rotateTime:0
    }
  },
  mounted() {
    // 设置tabbar的active
    active_g = 4

    token_g = JSON.parse(sessionStorage.getItem("usermessage")).token
    // 获取游戏页头部信息
    this.getHeaderInfo()
    // 获取公告信息
    this.getNoticeInfo()
  },
  methods: {
    clickMining() {
      if(!token_g) {
        Dialog.alert({
          message: '请先登录'
        }).then(() => {
          // on close
        });
        return false
      }
      if(!this.btnDisabled) {
        this.btnDisabled = true

        // 点击挖矿
        this.$axios({
          method: 'POST',
          url: url_g + '/mining/',
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          console.log(res)
          if(res.data) {
            if(!res.data.detail) {
              this.rotateTime++;
              // 使球旋转
              document.getElementsByClassName("game-ball")[0].style.transform = "rotate("+parseInt(this.rotateTime * 360)+"deg)";
              //this.$refs.gameBall.className = 'game-ball rotate'
              setTimeout(() => {
                this.btnDisabled = false
                this.$refs.gameBall.className = 'game-ball'
                Toast.success(`恭喜挖了${res.data.quantity}个AUTOKEN`);
              }, 3000)
            } else {
              this.btnDisabled = false
              Toast.fail(res.data.detail)
              this.getHeaderInfo()
            }
          }
        }).catch((e) => {
          console.error('POST err:' + e);
        });

      } else {

      }
    },
    clickToNotice() {
      this.$router.push('/notice')
    },
    getHeaderInfo() {
      if(!token_g) {
        Dialog.alert({
          message: '请先登录'
        }).then(() => {
          // on close
        });
        return false
      } else {
        // 头部信息
        this.$axios({
          method: 'GET',
          url: url_g + '/obtinfo/',
          headers: {
            'Authorization': 'Bearer ' + token_g
          }
        }).then((res) => {
          if(res.data) {
            this.obtInfo = res.data.data
          }
        }).catch((e) => {
          console.error('GET err:' + e);
          Dialog.alert({
            message: '请先登录'
          }).then(() => {
            // on close
          });
        });
      }
    },
    getNoticeInfo() {
      // 头部信息
      this.$axios({
        method: 'GET',
        url: url_g + '/notification/'
      }).then((res) => {
        if(res.data) {
          let resultsFirst = res.data.results[0]
          this.noticeShortInfo = resultsFirst.title + '：' + resultsFirst.desc
        }
      }).catch((e) => {
        console.error('GET err:' + e);
        Dialog.alert({
          message: '请先登录'
        }).then(() => {
          // on close
        });
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
p {
  margin: 0;
  font-size: 14px;
}
.game-box {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: url('/static/img/game/game_bg.jpg') no-repeat;
  background-size: 100% 100%;
}
.container {
  position: relative;
  padding: 10px;
}
.game-ball-container {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.game-ball {
  position: relative;
  /*left: -10px;*/
  top: -42px;
  width: 200px;
  transition: transform 3s;
  -webkit-transition: transform 3s; /* Safari */
}
.container-top {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 40px;
}
.container-top img {
  width: 30px;
  height: 30px;
  margin-right: 10px;
}
.container-top span {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}
.notice-bar {
  background-color: transparent;
  color: #fff;
}
.container-right {
  position: absolute;
  right: 20px;
  top: 100px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.container-right img {
  width: 50px;
  height: 50px;
}
.container-right span {
  color: #fff;
  font-size: 14px;
}
.rotate {
  animation: circle 3s infinite;
  -webkit-animation:circle 3s infinite;
}
@-webkit-keyframes circle{
  0%{
    transform:rotate(0deg);
  }
  100%{
    transform:rotate(360deg);
  }
}
</style>
